<template>
  <div class="group_purchase">
    <header>
      <li @click="goback()">
        <van-icon name="arrow-left" />
      </li>
      <li>团购</li>
      <li class="li">
        <span>
          <van-icon name="ellipsis" />
        </span>
        <span>
          <van-icon name="stop-circle-o" />
        </span>
      </li>
    </header>
    <main>
      <div class="main" v-for="(item,index) in list" :key="index">
        <img :src="item.img1" alt />
        <li>{{item.plot}}</li>
        <li>{{item.site}}</li>
        <li>
          <span>活动时间:{{item.time}}</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
          <span>已报名:{{item.place}}人</span>
        </li>
        <li class="li_one">
          <span>
            <a-switch checked-children="开启" un-checked-children="关闭" default-checked />
          </span>
          &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;
          <span
            class="span_one"
          >
            <button @click="detail(item.id)">开团</button>
            &emsp;
            <button @click="del(item.id)">删除</button>
          </span>
        </li>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "../../utils/request";
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //获取数据
    getList() {
      axios({
        url: "/api/lists",
        method: "post"
      }).then(res => {
        this.list = res.data.data;
      });
    },
    //跳转至详情页
    detail(id) {
      this.$router.push(`/starting/` + id);
    },
    //删除
    del(id) {
      axios({
        url: "/api/delet",
        method: "delete",
        data: {
          id: this.id
        }
      }).then(res => {
        this.getList();
      });
    },
    //返回升一页
    goback() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.group_purchase {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: 80px;
  display: flex;
  font-size: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px;
  color: #ffffff;
  background: linear-gradient(45deg, #0f7ef4, #1988f6, #34a0fd);
}
header li:nth-child(3) {
  width: 80px;
  height: 30px;
  border: 1px solid #ffffff;
  border-radius: 20px;
}
header .li span {
  width: 50%;
  display: inline-block;
  text-align: center;
}
main {
  flex: 1;
  overflow-y: auto;
}
.main {
  width: 100%;
  height: 350px;
}
.main img {
  width: 95%;
  height: 200px;
  margin-left: 10px;
  margin-top: 10px;
}
.main li {
  line-height: 30px;
  margin-left: 10px;
}
.span_one button {
  width: 60px;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
  display: inline-block;
  border-radius: 7px;
}
.span_one button:nth-child(1) {
  background: #1988f6;
  color: #ffffff;
  border: none;
}
.span_one button:nth-child(2) {
  background: #e7e7e7;
  color: #8f8e8e;
  border: none;
}
</style>